<template>
  <div class="com-container">
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null, //
      choiceType: 'map', // 显示的数据类型
    }
  },
  created() {
    this.$socket.registerCallBack("trendData", this.getData)
  },
  mounted() {
    this.initChart()
  },
  destroyed() {
    this.$socket.unRegisterCallBack("trendData")
  },
  methods: {
    initChart() {
      console.log("init chart")

      this.chartInstance = this.$echarts.init(this.$refs.trend_ref)
      const initOption = {};
      this.chartInstance.setOption(initOption)
    },
    getData(dmgData,expectDmgData,timesArray,suitExpect,suitMax) {
      // await
      this.allData = null;
      this.$parent.$data.artifactListMax = suitMax;
      this.$parent.$data.suitExpect = suitExpect;
      this.updateChart(dmgData,expectDmgData,timesArray)
    },

    updateChart(dmgData,expectDmgData,timesArray) {
      // 半透明的颜色值
      const colorArr1 = [
        'rgba(11, 168, 44, 0.5)',
        'rgba(44, 110, 255, 0.5)',
        'rgba(22, 242, 217, 0.5)',
        'rgba(254, 33, 30, 0.5)',
        'rgba(250, 105, 0, 0.5)'
      ]
      // 全透明的颜色值
      const colorArr2 = [
        'rgba(11, 168, 44, 0)',
        'rgba(44, 110, 255, 0)',
        'rgba(22, 242, 217, 0)',
        'rgba(254, 33, 30, 0)',
        'rgba(250, 105, 0, 0)'
      ]
      // 处理数据
      // 类目轴的数据
      const timeArr = timesArray
      // y轴的数据 series下的数据
      const seriesArr = [{
        name: "hutao",
        label: {
          show:true,
          position:'top'
        },
        type: 'line',
        data: dmgData,
        areaStyle: {
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colorArr1[1]
            }, // %0的颜色值
            {
              offset: 1,
              color: colorArr2[1]
            } // 100%的颜色值
          ])
        }
      },
        {
          name: "max",
          label: {
            show:true,
            position:'top'
          },
          type: 'line',
          data: expectDmgData,
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorArr1[2]
              }, // %0的颜色值
              {
                offset: 1,
                color: colorArr2[2]
              } // 100%的颜色值
            ])
          }
        }]

      const dataOption = {
        xAxis: {
          type: 'category',
          data: timeArr
        },
        legend: {
          data: ["最大爆伤","期望伤害"]
        },
        yAxis:{
          type: 'value',
          scale:true,
        },
        series: seriesArr
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}


</script>
